<template>
	<div v-loading="load.load">
		<div class="one_flex div">
			<div class="HourlyStatisticsHd flex">
				<h3>订单金额趋势 <i v-if="info">截至当前，今天销量{{ info.total.order_price.today }}元、昨天销量{{ info.total.order_price.yesterday }}元、上周今天销量{{ info.total.order_price.last_week }}元、指定日期销量{{ info.total.order_price.time }}元</i></h3>
				<div class="right flex">
					<el-radio-group class="radio" v-model="orderAction.value" @change="loadData">
						<el-radio :label="item.key" v-for="(item, index) in orderAction.list">{{ item.label }}</el-radio>
					</el-radio-group>
					<el-date-picker size="small" v-model="time" class="timeEc" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="选择指定日期" @change="loadData" />
				</div>
			</div>
			<div id="priceEchart" class="echart"></div>
		</div>
		<div class="one_flex div">
			<div class="HourlyStatisticsHd flex">
				<h3>订单笔数趋势 <i v-if="info">截至当前，今天销量{{ info.total.order_num.today }}笔、昨天销量{{ info.total.order_num.yesterday }}笔、上周今天销量{{ info.total.order_num.last_week }}笔、指定日期销量{{ info.total.order_num.time }}笔</i></h3>
				<div class="right flex">
					<el-radio-group class="radio" v-model="orderAction.value" @change="loadData">
						<el-radio :label="item.key" v-for="(item, index) in orderAction.list">{{ item.label }}</el-radio>
					</el-radio-group>
					<el-date-picker size="small" v-model="time" class="timeEc" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="选择指定日期" @change="loadData" />
				</div>
			</div>
			<div id="numEchart" class="echart"></div>
		</div>
	</div>
</template>

<script>
	import dayjs from "dayjs";
	let echarts = require("echarts");
	export default {
		data() {
			return {
				
				// 加载动画
				load: { load: false },
				
				// 查询指定某一天
				time: dayjs(new Date().getTime() - 1209600000).format("YYYY-MM-DD"),
				
				// 类型筛选
				orderAction: { value: "0", list: [] },
				
				// 金额Echarts
				priceEchartsDom: null,
				
				// 笔数Echarts
				priceEchartsDom: null,
				
				// 基本数据
				info: null,
				
			};
		},
		computed: {
			
			// 将时间转换为汉字
			timeToChinese(){
				return function(time){
					let today = this.app.toTime(new Date(Date.now()).toISOString(), "YYYY-MM-DD"); // 今日日期
					let yesterday = this.app.toTime(new Date(Date.now() - 86400000).toISOString(), "YYYY-MM-DD"); // 昨天日期
					let last_week = this.app.toTime(new Date(Date.now() - 86400000 * 7).toISOString(), "YYYY-MM-DD"); // 上周今天
					let times = this.time; // 指定日期
					if(today === time){
						return "今日";
					}else if(yesterday === time){
						return "昨日";
					}else if(last_week === time){
						return "上周今天";
					}else if(times === time){
						return "指定日期";
					}
					return time;
				}
			},
			
		},
		methods: {

			// 修改窗口大小
			resize() {
				this.moneyEchartsDom && this.moneyEchartsDom.resize();
				this.numEchartsDom && this.numEchartsDom.resize();
			},

			// 加载数据
			loadData() {
				let _this = this;
				_this.app.ajax({
					url: "/admin/total/order",
					data: {
						order_action: _this.orderAction.value, // 订单类型
						time: _this.time, // 指定某一天 2024-03-01
					},
					load: _this.load,
					success(res) {
						let orderActionList = [];
						res.data.filter.map((item) => {
							if(item.field === "order_action"){
								item.select.map((prop) => {
									orderActionList.push({ label: prop.label, key: prop.value });
								});
							}
						});
						_this.orderAction.list = orderActionList;
						_this.info = { hours: res.data.hours, list: res.data.list, total: res.data.total };
						_this.setOption();
					}
				});
			},

			// 渲染图表
			setOption() {
				let _this = this;
				let colors = ["#7eb75d", "#6276de", "#fcac6f", "#9c9c9c"];
				for(let i = 0; i < 2 ;i++){
					let key = (i == 0 ? "price" : "num");
					let echartsDom = _this[`${key}EchartsDom`];
					echartsDom && echartsDom.clear();
					echartsDom = echarts.init(document.getElementById(`${key}Echart`));
					echartsDom.setOption({
						color: colors,
						tooltip: {
							trigger: "axis",
							backgroundColor: "#FFF",
							padding: 10,
							extraCssText: "box-shadow:0 0 10px rgba(0,0,0,0.2)",
							textStyle: {
								color: "#000",
							},
							formatter(params) {
								return `<div style="font-size:13px;color:#666;">${params[0].name}:00 ~ ${params[0].name}:59</div>` +
								params.map((item, index) => {
									return `
											<div style="font-size:13px;color:#666;display:flex;">
												<div style="min-width:100px;margin-right:5px;line-height:23px;">
													<span style="vertical-align:middle;margin-top:-1px;display:inline-block;margin-right:5px;border-radius:4px;width:4px;height:4px;background-color: ${colors[index]};"></span>
													<span>${item.seriesName}: </span>
												</div>
												<div>${item.value}</div>
											</div>
										`;
								}).join("");
							},
							axisPointer: {
								type: "cross"
							},
						},
						legend: {
							icon: 'circle',
							itemWidth: 10,
							textStyle: {
								fontSize: 12,
								color: '#333'
							},
						},
						grid: {
							x: "3%",
							width: "94%",
							// y: '0%',
							top: "20%",
							bottom: "20%"
						},
						xAxis: [{
							type: "category",
							axisPointer: {
								label: {
									show: false
								}
							},
							// prettier-ignore
							data: _this.info.hours,
							axisLine: {
								lineStyle: {
									color: "#FFF"
								}
							},
							axisLabel: {
								color: "#a3a3a3"
							},
							axisTick: {
								show: false,
							},
						}],
						yAxis: {
							axisPointer: {
								show: false
							},
							splitLine: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: "#FFF",
								}
							},
							axisLabel: {
								formatter: "{value} ",
							},
						},
						series: _this.info.list[`order_${key}`].map((item, index) => {
							return {
								name: `${_this.timeToChinese(item.day)} : (${item.day})`,
								type: "line",
								smooth: true,
								symbolSize: 3,
								data: item.list,
								emphasis: {
									focus: "series"
								},
								label: {
									normal: {
										show: true,
										position: "inside",
										formatter: function(params) {
											// return Number(params.value) + Number(rechangOldMoney[params.dataIndex]);
										},
										fontSize: 11,
										color: "#333",
										textBorderColor: "#FFF",
										textBorderWidth: 3,
									}
								},
							}
						})
					});
				}
			},

		},
		mounted() {
			this.loadData();
		}
	};
</script>

<style lang="scss" scoped>
	.div {
		background: #fff;
		border-radius: 12px;
	}
	.one_flex {
		margin-bottom: 20px;
		.HourlyStatisticsHd {
			flex-direction: row;
			justify-content: space-between;
			// align-items: center;
			padding: 16px 16px 0;
			h3 {
				padding: 0;
				i {
					font-size: 12px;
					margin-left: 20px;
				}
			}
			.right {
				flex-direction: row;
				align-items: center;
				padding-top: 5px 5px 0 0;
				.radio {
					margin-right: 40px;
				}
				.timeEc {
					width: 150px;
				}
			}
		}
		h3 {
			padding: 16px 0 0 16px;
			color: #7e7e9b;
			font-size: 15px;
			font-weight: normal;
			line-height: 25px;
		}
		.echart {
			height: 260px;
		}
	}
</style>